<template>
    <div>
        <!-- 查询表单 -->
        <!--
        inline 行内表单，内联表单
        -->
        <el-form inline>
            <el-form-item>
                <!-- 
                clearable 提供一个清空此组件的值的功能
                -->
                <el-input v-model="searchForm.username" placeholder="用户名" clearable></el-input>
            </el-form-item>
            <el-form-item>
                <el-input v-model="searchForm.nickName" placeholder="昵称" clearable></el-input>
            </el-form-item>
            <el-form-item>
                <el-input v-model="searchForm.mobile" placeholder="手机号" clearable></el-input>
            </el-form-item>
            <el-form-item>
                <el-select v-model="searchForm.gender" placeholder="性别" clearable>
                    <el-option label="男性" value="1"></el-option>
                    <el-option label="女性" value="2"></el-option>
                    <el-option label="未知" value="3"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button @click="queryUser">查询</el-button>
                <el-button type="primary" @click="addUpdateUser()">新增用户</el-button>
            </el-form-item>
        </el-form>
        <!-- 数据表格 -->
        <el-table :data="tableData" border stripe>
            <el-table-column prop="id" label="ID" header-align="center" width="70" fixed></el-table-column>
            <el-table-column prop="username" label="用户名" header-align="center" fixed></el-table-column>
            <el-table-column prop="nickName" label="昵称" header-align="center"></el-table-column>
            <el-table-column prop="mobile" label="手机号" header-align="center"></el-table-column>
            <el-table-column prop="gender" label="性别" header-align="center"
                :formatter="genderFormatter"></el-table-column>
            <el-table-column label="操作" header-align="center" align="center" width="150" fixed="right">
                <!-- 
                通过作用域插槽可获取表格的当前行数据
                -->
                <template slot-scope="scope">
                    <el-button type="warning" size="mini" @click="addUpdateUser(scope.row.id)">编辑</el-button>
                    <el-button type="danger" size="mini" @click="deleteUser(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <!-- 
        @current-change 自定义事件，当页码变化时自动触发的一个事件
        @size-change 每页条数改变时触发的自定义事件
        -->
        <el-pagination :current-page="pageData.current" :page-size="pageData.size" :total="pageData.total"
            :page-sizes="[5, 10, 20, 50]" layout="sizes, prev, pager, next, ->, total, jumper"
            @current-change="currentChangeHandle" @size-change="sizeChangeHandle">
        </el-pagination>
        <!-- 新增编辑页 -->
        <user-add-update ref="addUpdate" @refreshTable="queryUser"></user-add-update>
    </div>
</template>

<script>
// 导入用户新增编辑页
import UserAddUpdate from './UserAddUpdate.vue';
export default {
    name: 'User',
    data() {
        return {
            // 查询表单数据
            searchForm: {
                username: undefined,
                nickName: undefined,
                mobile: undefined,
                gender: undefined
            },
            // 表格数据
            tableData: [],
            // 分页数据
            pageData: {
                current: 1,
                size: 5,
                total: 0
            }
        };
    },
    methods: {
        // 页码变化事件函数, 参数page: 变化之后的新页码
        currentChangeHandle(page) {
            // 将页码赋予data中的数据
            this.pageData.current = page;
            // 重新查询用户数据
            this.queryUser();
        },
        // 每页条数变化, 参数size: 变化之后的新条数
        sizeChangeHandle(size) {
            // 将新条数赋予data中的数据
            this.pageData.size = size;
            // 重置页码为1
            this.pageData.current = 1;
            this.queryUser();
        },
        // 查询用户
        queryUser() {
            this.$axios.get('/users', {
                params: {
                    // 分页相关参数
                    _page: this.pageData.current,
                    _limit: this.pageData.size,
                    // 当username参数的值为undefind,null时，在请求中是不会携带此参数
                    username: this.searchForm.username || undefined,
                    nickName: this.searchForm.nickName || undefined,
                    mobile: this.searchForm.mobile || undefined,
                    gender: this.searchForm.gender || undefined
                }
            }).then(response => {
                this.tableData = response.data;
                // 分页时总记录数是在响应头中x-total-count携带
                // console.log(response.headers['x-total-count']);
                this.pageData.total = parseInt(response.headers['x-total-count']);
            });
        },
        // 性别列数据格式化
        genderFormatter(row, column, cellValue) {
            // 必须有返回值
            if (cellValue == '1') {
                return '男性';
            } else if (cellValue == '2') {
                return '女性';
            } else if (cellValue == '3') {
                return '未知';
            } else {
                return '性别错误';
            }
        },
        // 打开新增编辑页面
        addUpdateUser(id) {
            // 父调用子方法
            this.$refs.addUpdate.initDialog(id);
        },
        // 删除
        deleteUser(id) {
            this.$confirm('确定要删除该条数据吗?', '提示', {
                type: 'warning'
            }).then(() => {
                this.$axios.delete(`/users/${id}`).then(response => {
                    // 提示用户
                    this.$message.success('删除成功');
                    // 刷新表格
                    this.queryUser();
                });
            }).catch(() => { });
        }
    },
    mounted() {
        this.queryUser();
    },
    components: {
        UserAddUpdate
    }
}
</script>

<style scoped></style>